<template>
  <view class="container">
    <!-- 状态栏占位 -->
    <!-- #ifdef MP-WEIXIN -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    <!-- #endif -->
    
    <!-- 顶部背景区域 -->
    <view class="header-bg">
      <!-- 返回按钮 -->
      <view class="back-btn" @click="goBack">
        <image src="/static/Images/notice/Fanhui.png" class="back-icon"></image>
      </view>
    </view>
    
    <!-- 选项卡容器 -->
    <view class="tab-container">
      <view class="tab-item" :class="{active: activeTab === 'strategy'}" @click="switchTab('strategy')">
        <text class="tab-text">平台攻略</text>
        <view class="tab-underline" v-if="activeTab === 'strategy'"></view>
      </view>
      <view class="tab-item" :class="{active: activeTab === 'rules'}" @click="switchTab('rules')">
        <text class="tab-text">平台规则</text>
        <view class="tab-underline" v-if="activeTab === 'rules'"></view>
      </view>
    </view>
    
    <!-- 内容区域 -->
    <view class="content-area">
      <!-- 平台攻略内容 -->
      <view v-if="activeTab === 'strategy'" class="content-section">
        <view class="rule-list">
          <view class="rule-card">
            <view v-for="(item, index) in strategyData" :key="index" class="rule-item" @click="viewDetail(item)">
              <view class="rule-subtitle">{{ item.title || `标题${index + 1}` }}</view>
              <view class="rule-brief">{{ item.description || (item.content && item.content.substring(0, 30)) }}...</view>
              <view class="rule-content-block">
                <rich-text class="rule-text" :nodes="item.content"></rich-text>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 平台规则内容 -->
      <view v-if="activeTab === 'rules'" class="content-section">
        <view class="rule-list">
          <view class="rule-card">
            <view v-for="(item, index) in rulesData" :key="index" class="rule-item" @click="viewDetail(item)">
              <view class="rule-subtitle">{{ item.title || `标题${index + 1}` }}</view>
              <view class="rule-brief">{{ item.description || (item.content && item.content.substring(0, 30)) }}...</view>
              <view class="rule-content-block">
                <rich-text class="rule-text" :nodes="item.content"></rich-text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { indexApi } from '@/utils/api.js'
import { userStorage } from '@/utils/storage.js'

export default {
  data() {
    return {
      // 状态栏高度
      statusBarHeight: 0,
      activeTab: 'strategy',
      strategyData: [
        {
          id: 1,
          title: '新手入门指南',
          description: '详细介绍平台基本操作流程和注意事项',
          content: '欢迎来到我们的平台！本指南将帮助您快速了解平台的基本功能和操作方法。首先，请完成账户注册和实名认证...'
        },
        {
          id: 2,
          title: '充值提现攻略',
          description: '如何安全快速地进行充值和提现操作',
          content: '充值提现是平台的核心功能之一。为了保障您的资金安全，我们提供了多种充值方式和严格的提现流程...'
        },
        {
          id: 3,
          title: '订单处理技巧',
          description: '高效处理订单的方法和常见问题解决',
          content: '订单处理是平台运营的重要环节。掌握正确的处理技巧可以大大提高您的工作效率和客户满意度...'
        }
      ],
      rulesData: [
        {
          id: 4,
          title: '平台使用规范',
          description: '用户在使用平台时需要遵守的基本规则',
          content: '为了维护良好的平台秩序，所有用户都必须严格遵守以下使用规范：1. 禁止发布违法违规内容...'
        },
        {
          id: 5,
          title: '交易安全条例',
          description: '保障交易安全的相关规定和要求',
          content: '交易安全是我们最重视的问题。为了保护所有用户的合法权益，特制定以下安全条例...'
        },
        {
          id: 6,
          title: '违规处罚机制',
          description: '对违反平台规则行为的处罚标准',
          content: '对于违反平台规则的行为，我们将根据情节严重程度采取相应的处罚措施，包括但不限于警告、限制功能、封禁账户等...'
        }
      ],
      page: 1,
      size: 10,
      loading: false
    }
  },
  onLoad() {
    // #ifdef MP-WEIXIN
    // 获取系统信息
    const systemInfo = uni.getSystemInfoSync()
    // 获取胶囊按钮信息
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
    // 计算状态栏高度：系统状态栏高度 + 胶囊按钮高度 + 额外间距
    this.statusBarHeight = (systemInfo.statusBarHeight || 0) + (menuButtonInfo.height || 32) + 8
    // #endif
    
    this.getNoticeList()
  },
  methods: {
    goBack() {
      uni.navigateTo({
        url: '/pages/notice/index'
      })
    },
    switchTab(tab) {
      this.activeTab = tab
    },
    viewDetail(item) {
      uni.navigateTo({
        url: `/pages/notice/textdetail?id=${item.id}`
      })
    },
    async getNoticeList() {
      try {
        this.loading = true
        const response = await indexApi.getNoticeList({
          type: 3,
          page: this.page,
          size: this.size
        })
        
        if (response.code === 200 && response.data) {
          const data = response.data.data || []
          
          if (data.length > 0) {
            // 如果有 API 数据，将前5条分配给平台攻略，其余分配给平台规则
            const apiStrategyData = data.slice(0, 5)
            const apiRulesData = data.slice(5)
            
            // 合并 API 数据和默认数据
            this.strategyData = [...apiStrategyData, ...this.strategyData.slice(apiStrategyData.length)]
            this.rulesData = [...apiRulesData, ...this.rulesData.slice(apiRulesData.length)]
          }
          // 如果没有 API 数据，保持默认数据不变
        } else {
          console.log('API 返回数据为空，使用默认数据')
        }
      } catch (error) {
        console.error('获取通知列表失败:', error)
        console.log('网络错误，使用默认数据')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
/* 状态栏样式 */
.status-bar {
  width: 100%;
  background: linear-gradient(180deg, #FF7B80 0%, rgba(244,234,234,0) 100%);
}

.container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
}

.header-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  height: 120px;
  position: relative;
  z-index: 5;
  position: relative;
}

.back-btn {
  position: absolute;
  top: 50px;
  left: 16px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.back-icon {
  width: 24px;
  height: 24px;
}

.main-title {
  font-size: 24px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 8px;
}

.sub-title {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.tab-container {
  background-color: #ffffff;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid #f0f0f0;
  margin-left: 5rem;
  margin-top: -7rem;
}

.tab-item {
  position: relative;
  padding: 16px 20px;
}

.tab-text {
  font-size: 16px;
  color: #666666;
  font-weight: 500;
}

.tab-item.active .tab-text {
  color: #ff4444;
}

.tab-underline {
  position: absolute;
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2.5rem;
  height: 3px;
  background-color: #ff4444;
  border-radius: 2px;
}

.content-area {
  background-color: #f5f5f5;
  margin: 0;
  padding: 12px;
  max-height: calc(100vh - 250px);
  overflow-y: auto;
  border-radius: 8px;
}

.content-section {
  width: 100%;
  
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 16px;
}

.section-content {
  margin-bottom: 20px;
}

.content-text {
  font-size: 14px;
  color: #333333;
  line-height: 1.6;
}

.rule-list {
  width: 100%;
  border-radius: 8px;
  padding-bottom: 0.2rem;
}

.rule-card {
  background-color: #f5f5f5;
  border-radius: 8px;
  overflow: hidden;
  padding-top: 3.5rem;
}
.rule-item {
  background-color: #ffffff;
  border-radius: 8px;
  padding-top: 0.5rem;
  padding-bottom: 1.2rem;
  margin-top: 0.3rem;
  margin-bottom: 1.2rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.rule-subtitle {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  margin-bottom: 8px;
  margin-left: 1rem;
  margin-right: 1rem;
  margin-top: 0.5rem;
  padding-top: 0.3rem;
}

.rule-brief {
  font-size: 14px;
  color: #666666;
  margin-bottom: 8px;
  font-style: italic;
  margin-left: 1rem;
  margin-right: 1rem;
}

.rule-content-block {
  background: #F9F9F9;
  border-radius: 8px;
  padding: 12px;
  margin-top: 8px;
  margin-left: 1rem;
  margin-right: 1rem;
}

.rule-text {
  font-size: 14px;
  color: #666666;
  line-height: 1.5;
  display: block;
  margin-bottom: 4px;
}
</style>